<template>
  <div class="app">
    <div v-if="isShowEdit">
      <input type="text" v-model="editValue" ref="inp" />
      <button>确认</button>
    </div>
    <div v-else>
      <span>{{ title }}</span>
      <button @click="editFn">编辑</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '大标题',
      isShowEdit: false,
      editValue: '',
    }
  },
  methods: {
    // Vue底层 对DOM更新（修改DOM中内容、创建DOM、删除DOM）的操作,都是异步更新的
    editFn() {
      // 显示输入框
      this.isShowEdit = true
      // 获取焦点
      // DOM在异步更新的过程中 不会阻塞代码的执行
      // console.log(this.$refs.inp)  undefind的原因：是因为DOM更新是异步操作，此时DOM还没有更新完
      // this.$refs.inp.focus()

      // this.$nextTick(回调函数)  回调函数的执行时机：DOM更新完成之后，会自动执行回调函数
      this.$nextTick(() => {
        // 执行时机：DOM更新完成之后，会自动执行回调函数
        // console.log(this.$refs.inp)
        this.$refs.inp.focus()
      })
    },
  },
}
</script> 